<!-- 巡更管理-点位管理 -->
<template>
  <div class="app-container">
    <TopMenu v-if="showTopMenu" :data-list="topDataLabel" @tabsChange="tabsChange"/>
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="form" :inline="true" :model="listQuery" class="form-bottom-line" label-width="88px">
          <el-form-item v-if="showTopMenu" label="选择单位:">
            <el-select v-model="listQuery.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item label="建筑群名称:">
            <el-select v-model="listQuery.park_id" clearable placeholder="请选择建筑群名称">
              <el-option v-for="item in parksList" :key="item.park_id" :label="item.name" :value="item.park_id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/patrol-points/index']" type="primary" size="small" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button v-permission="['v1/patrol-points/create']" type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加点位</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" stripe border el-table-column fit highlight-current-row>
        <el-table-column align="center" label="点位名称" prop="name">
          <template slot-scope="scope"><span class="hink" @click="handleEdit(scope.row)">{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="建筑群名称" prop="park_name"/>
        <el-table-column align="center" label="NFC标签" prop="nfc_code" />
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <!-- 启用 -->
            <el-switch v-permission="['v1/patrol-points/enable']" v-model="scope.row.is_forbidden" active-text="已启用" inactive-text="已停用" active-color="#109008" inactive-color="#828282" @click.native.prevent="iconQiyong(scope.$index, scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <formPointPosition
        v-if="dialogVisible"
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        :dialog-visible.sync="dialogVisible"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
    </div>
  </div>
</template>
<script>
import { companyList, getSocialUnit } from '@/api/company'
import { pointPositionList, pointPositionUpdate } from '@/api/pointPosition'
import { parksList } from '@/api/park'
import TopMenu from '@/components/TopMenu' // 顶部菜单
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formPointPosition from './components/formPointPosition.vue'
import checkPermission from '@/utils/permission' // 权限判断函数
export default {
  name: 'Order',
  components: { Pagination, formPointPosition, TopMenu },
  data() {
    return {
      // 新增修改弹窗信息
      dialogForm: {
        corp_id: '',
        corp_name: '',
        park_id: '',
        park_name: '',
        name: '',
        nfc_code: ''
      },
      topDataLabel: {
        data: []
      },
      dialogType: '添加',
      dialogVisible: false,
      formLoading: false,
      // 表格信息
      list: [],
      total: 0,
      listLoading: false,
      corp_id: '',
      corp_name: '',
      listQuery: {
        page: 1,
        offset: 8,
        corp_id: '',
        corp_name: '',
        park_id: ''
      },
      showTopMenu: false,
      companyList: [],
      parksList: []
    }
  },
  created() {
    this.getSocialUnit()
    this.getList()
    // this.getParkList()
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      this.listLoading = true
      const that = this
      pointPositionList(this.listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.list = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === 2
              array[index].index = index
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 顶部切换监听
    tabsChange(value) {
      const that = this
      this.companyList.forEach(function(data, index, array) {
        if (value === array[index].name) {
          that.listQuery.corp_id = array[index].corp_id
        }
      })
      this.getList()
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      companyList()
        .then(response => {
          if (response.data.code === 40000) {
            that.companyList = response.data.data.data
            if (that.companyList && that.companyList.length > 0) {
              that.corp_id = that.companyList[0].corp_id
              that.corp_name = that.companyList[0].name
            }
            that.showTopMenu = true
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
            that.getSocialUnit()
          }
        })
        .catch(() => {
          this.companyList = []
        })
    },
    // 单位下拉框
    companyChange(value) {
      if (value !== '') {
        var select = {}
        this.companyList.forEach(function(data, index, array) {
          if (value === array[index].corp_id) {
            select = array[index]
          }
        })
        this.listQuery.park_id = ''
        this.getParkList()
        if (this.topDataLabel.data.indexOf(select.name) === -1) {
          this.topDataLabel.data.push(select.name)
        }
      } else {
        this.listQuery.park_id = ''
        this.parksList = []
      }
    },
    // 获取建筑群列表
    getParkList() {
      const that = this
      var query = {
        page: 1,
        offset: 1000,
        corp_id: that.listQuery.corp_id
      }
      parksList(query)
        .then(response => {
          if (response.data.code === 40000) {
            that.parksList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.parksList.push(array[index])
            })
          }
        })
        .catch(() => {
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
      // this.setTimeoutFn()
    },
    // 启用/停用
    iconQiyong(index, data) {
      const that = this
      var flag = data.is_forbidden ? '启用' : '停用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = {
          corp_id: data.corp_id,
          point_id: data.point_id,
          park_id: data.park_id,
          is_forbidden: flag === '启用' ? 2 : 1
        }
        pointPositionUpdate(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
            that.getList()
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    // 修改
    handleEdit(data) {
      this.dialogForm = {
        corp_id: data.corp_id,
        corp_name: data.corp_name,
        park_id: data.park_id,
        park_name: data.park_name,
        name: data.name,
        nfc_code: data.nfc_code,
        point_id: data.point_id
      }
      this.dialogVisible = true
      this.dialogType = '修改'
    },
    // 新增点位
    handleAdd() {
      this.dialogForm = {
        requestFn: {},
        corp_id: '',
        corp_name: '',
        park_id: '',
        park_name: '',
        name: '',
        nfc_code: ''
      }
      this.dialogVisible = true
      this.dialogType = '添加'
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.getList()
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    },
    getSocialUnit() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.showTopMenu = true
            that.companyList = data.data
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>
